<template>
  <div>
    <van-nav-bar
      title="影院"
      ref="navbar"
      @click-left="handleleft"
      @click-right="handleright"
    >
      <template #right>
        <van-icon name="search" size="18" color="black" />
      </template>
      <template #left>
        {{ $store.state.cityName }}
        <van-icon name="arrow-down" />
      </template>
    </van-nav-bar>
    <div
      class="box"
      :style="{
        height: height
      }"
    >
      <ul>
        <li v-for="data in $store.state.CinemasData" :key="data.cinemaId">
          <div class="left">
            <div class="cinema_name">{{ data.name }}</div>
            <div class="cinema_text">{{ data.address }}</div>
          </div>
          <div class="right cinema_name">
            <div style="color: red">￥{{ data.lowPrice / 100 }}起</div>
            <div></div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
//Better-Scroll实现移动端页面中拖动滚动、拉动属性等功能
import BetterScroll from 'better-scroll'

export default {
  data() {
    return {
      height: '0px'
    }
  },
  methods: {
    handleleft() {
      this.$router.push('/city')
      this.$store.commit('clearCinema')
    },
    handleright() {
      this.$router.push('/cinemas/search')
    }
  },
  mounted() {
    //动态计算高度
    this.height =
      document.documentElement.clientHeight -
      document.querySelector('footer').offsetHeight -
      this.$refs.navbar.$el.offsetHeight +
      'px'
    if (this.$store.state.CinemasData.length === 0) {
      this.$store.dispatch('getCinemasData').then((res) => {
        this.$nextTick(() => {
          new BetterScroll('.box', {
            scrollbar: {
              fade: true
            }
          })
        })
      })
    } else {
      this.$nextTick(() => {
        new BetterScroll('.box', {
          scrollbar: {
            fade: true
          }
        })
      })
    }
    // http({
    //   url: `gateway?cityId=${this.$store.state.cityId}&ticketFlag=1&k=362207`,
    //   headers: {
    //     'X-Client-Info':
    //       '{"a":"3000","ch":"1002","v":"5.2.1","e":"16737777312402682014793729","bc":"110100"}',
    //     'X-Host': 'mall.film-ticket.cinema.list'
    //   }
    // }).then((res) => {
    //   console.log(res.data.data.cinemas)
    //   this.cinemalist = res.data.data.cinemas

    // this.$nextTick(() => {
    //   new BetterScroll('.box', {
    //     scrollbar: {
    //       fade: true
    //     }
    //   })
    // })
    // })
  }
}
</script>
<style lang="scss" scoped>
ul {
  li {
    padding: 0.9375rem;
    display: flex;
    justify-content: space-between;
    .left {
      width: 13.25rem;
    }
    .cinema_name {
      font-size: 15px;
    }
    .cinema_text {
      color: #797d82;
      font-size: 12px;
      margin-top: 5px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
.box {
  //   height: 38.625rem;
  overflow: hidden;
  position: relative;
  //修正滚动条的位置
}
</style>
